<template>
	<view class="homePage">
		<view class="head">
			<view class="wz_left">
				<uni-icons type="paperplane-filled" size="20"></uni-icons>
				<text>长沙</text>
			</view>
			<view class="wz_right">已服务2637万用户</view>
		</view>
		<view class="uni-margin-wrap">
			<swiper class="swiper" circular autoplay>
				<swiper-item v-for="item in lb" :key="item.id">
					<view class="swiper-item"><image class="img1" :src="item.img" mode=""></image></view>
				</swiper-item>
			</swiper>
		</view>
		<view class="service">
			<view class="Hot" v-if="b.length">热门服务</view>
			<view class="daily">
				<view class="img-left" v-for="item in b[0]" :key="item.id"><img class="imgl" :src="item.img" alt="" /></view>
			</view>
			<view class="Hot">家居家电清洗</view>
			<view class="uni-margin-wrap2">
				<swiper class="swiper">
					<swiper-item v-for="item, i in a.length" :key="i">
						<view class="swiper-item">
							<!-- <view class="item i" v-for="item in a[i]" :key="item.id" @click="gofl(item.classify)"> -->
							<view class="item i" v-for="item in a[i]" :key="item.id" @click="gofl(item.classify)">
								<image class="image" :src="item.img" mode=""></image>
								<title class="text">{{ item.classify }}</title>
							</view>
						</view>
						<!-- </view> -->
					</swiper-item>
				</swiper>
			</view>
			<view class="Hot">推荐服务</view>
			<view class="nr">
				<ul class="ul">
				<!-- 	<li class="li" v-for="item in arr2" :key="item.id" @click="xq(item.id)">
						<view class="left">
							<image :src="item.img" mode=""></image>
						</view>
						</li> -->
					<li class="li" v-for="item in arr2" :key="item.id">
						<view class="left"><image :src="item.img" mode=""></image></view>s
						<view class="right">
							<view class="top">
								<view class="t">{{ item.name }}</view>
								<view class="b">{{ item.text }}</view>
							</view>
							<view class="bottom">
								<view class="l">${{ item.price }}</view>
							</view>
						</view>
					</li>
				</ul>
			</view>
		</view>
	</view>
</template>

<script setup>
// vue3小程序生命周期函数
import { onShareAppMessage, onLoad, onShow, onHide } from '@dcloudio/uni-app'
import { getHome, getFl, getLb, getLbt } from '@/api/modules/user.js'
import { reactive, toRefs } from 'vue'

const state = reactive({
	arr: [],
	arr2: [],
	a: [],
	b: [],
	lb: [],
	rm: []
})
const fl = async () => {
	const data = await getFl()
	console.log(data);
	state.arr = data
	for (let i = 0, len = Math.ceil(state.arr.length / 8); i < len; i++) {
		state.a[i] = state.arr.splice(0, 8)
	}
	console.log(state.a[0].length)
}
const lbt = async () => {
	const data = await getLbt(1)
	const res = await getLbt(0)
	state.lb = res
	state.rm = data
	for (let i = 0, len = Math.ceil(state.rm.length / 2); i < len; i++) {
		state.b[i] = state.rm.splice(0, 2)
	}
}
const hq = async () => {
	const data = await getHome()
	const res = await getLb()
	state.arr2 = res.data
}

const gofl = (classify) => {
	uni.navigateTo({
		url: `../../subpkg/classification/classification?classify=${classify}`
	})
}
const xq = (id) => {
	uni.navigateTo({
		url: `../../subpkg/details/details?id=${id}`
	})
}
// 页面加载
onLoad(message => {
	hq()
	fl()
	lbt()
})

// 页面显示
onShow(() => {})

// 页面隐藏
onHide(() => {})

// 页面分享(不定义该函数 页面将无法分享)
onShareAppMessage(() => {})
const { arr, arr2, lb, rm, a, b } = toRefs(state)
</script>

<style lang="scss">
.homePage {
	.head {
		margin-top: 20px;
		.wz_left {
			float: left;
			margin-left: 20px;
		}
		.wz_right {
			float: right;
			font-size: 14px;
			color: #9a9ea3;
			margin-right: 20px;
		}
	}
	.uni-margin-wrap {
		.swiper {
			.swiper-item {
				margin-top: 40rpx;
				margin-left: 40rpx;
				.img1 {
					border-radius: 10rpx;
					width: 670rpx;
					height: 261rpx;
				}
			}
		}
	}
	.service {
		margin-top: 80rpx;
		margin-left: 40rpx;
		.Hot {
			font-size: 21px;
			color: #363d4f;
			font-weight: 600;
		}
		.daily {
			margin: 40rpx 0;
			width: 670rpx;
			display: flex;
			justify-content: space-between;
			.img-left {
				width: 320rpx;
				height: 200rpx;
				.imgl {
					width: 320rpx;
					height: 200rpx;
				}
			}
		}
		.uni-margin-wrap2 {
			height: 400rpx;
			margin-bottom: 40rpx;
			.swiper {
				height: 100%;
				.swiper-item {
					margin-top: 40rpx;
					display: flex;
					flex-wrap: wrap;
					.item {
						width: 100rpx;
						padding: 20rpx 35rpx;
						text-align: center;
						.image {
							width: 100rpx;
							height: 100rpx;
							border-radius: 50%;
						}
						.text {
							font-size: 24rpx;
						}
					}
				}
			}
		}
		.nr {
			margin-top: 40rpx;
			.ul {
				.li {
					margin: 40rpx 0;
					display: flex;
					margin-bottom: 20rpx;
					.left {
						width: 300rpx;
						height: 200rpx;
						margin-right: 20rpx;
						image {
							width: 100%;
							height: 100%;
						}
					}
					.right {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						.top {
							.b {
								color: #ccc;
								font-size: 24rpx;
								width: 300rpx;
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
							}
						}
						.bottom {
							width: 340rpx;
							display: flex;
							justify-content: space-between;
							.l {
								color: red;
							}
						}
					}
				}
			}
		}
	}
}
</style>
